<!-- 
*
* 文章搜索
*
-->
<template>
    <div class="search-container shadow-box">
        <div class="search-title">搜索</div>
        <div class="search-main">
            <input type="text" class="search-input" maxlength="30" placeholder="搜索文章" v-model="searchValue" @keyup.enter="keyupEnter">
            <div class="search-icon" @click="keyupEnter">
                <svgIcon iconName="icon-sousuo"></svgIcon>
            </div>
        </div>
    </div>
</template>

<script setup>
import { articleStore } from '@/store/article/article';
import svgIcon from '@/components/system/svgicon/svgicon.vue';
import { ARTICLE_STATUS } from '@/constants/system/article';
import { isEmptyObject } from '@/utils/tools-util';

onBeforeMount(() => {
    setParam({});
});

// ========================= 计算属性 =========================
const searchParams = computed(() => articleStore().conditions);

// ========================= 监听 =========================
// 监听文章数据
watch(() => searchParams, (newValue)=>{
    if(isEmptyObject(newValue.value)) {
        searchValue.value = '';
    }
}, { deep: true })

// ========================= 搜索 =========================
const { setParam } = articleStore();
let searchValue = ref('');
async function keyupEnter() {
    let conditions = {
        params: {
            status: ARTICLE_STATUS.RELEASE_STATE.value,
            articleTitle:searchValue.value
        },
        // offset:1,
        // limit:10
    }
    setParam(conditions);
};
</script>

<style lang="scss" scoped>
    @import './search-sidebar.scss';
    @import '@/theme/animations.scss';
</style>

